<template>
    <!-- 页面搜索 -->
    <div class="qy-com-page-search">
        <div class="search-form">
            <van-search v-model="inputValue" shape="round" placeholder="请输入搜索关键词" input-align="center" @search="onSearch"></van-search><span @click="cancelSearch" class="font-btn">取消</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputValue: ''
        }
    },
    mounted() {
    },
    methods: {
        onSearch() {
            this.$emit('confirm', this.inputValue)
        },
        cancelSearch() {
            this.inputValue = ''
            this.$emit('cancel')
        },
    }
}
</script>

<style lang="scss" scoped>
    .qy-com-page-search {
        height: 100%;
        position: fixed;
        overflow: hidden;
        top: 0;
        background: #fff;
        width: 100%;
        z-index: 999;
        .search-form {
            .van-search {
                width: 86%;
            }
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
    }
</style>